<script setup lang="ts">
	import { nextTick, ref } from 'vue'
	const Emit = defineEmits(['resize'])

	const isScreen = ref(false)

	const changeScreen = () => {
		// 1. 设置全屏状态
		isScreen.value = !isScreen.value
		// 2. 调用图表的screenAdapter方法  本次渲染后调用
		nextTick(() => {
			Emit('resize')
		})
	}
</script>

<template>
	<div class="full_screen" :class="isScreen ? 'fullscreen' : ''">
		<!-- 插槽【图表】 -->
		<slot></slot>
		<!-- 缩放 图标 -->
		<i @click="changeScreen" class="resize iconfont" :class="[isScreen ? 'icon-compress-alt' : 'icon-expand-alt']"></i>
	</div>
</template>

<style scoped lang="scss">
	.full_screen {
		position: relative;
		.resize {
			position: absolute;
			right: 20px;
			top: 20px;
			transform: rotate(0deg);
			cursor: pointer;
		}
	}
	.fullscreen {
		position: fixed !important;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		z-index: 999;
		left: 0;
		top: 0;
	}
</style>
